<template>
    <div class="m-one-table">
        <div class="m-one-table-name">
           <div> {{ controlName(metadata) }}</div>
            <div class="x-help-describe" v-if="metadata.control.describe && !metadata.control.describePosition" v-html="metadata.control.describe"></div>
        </div>
        <div class="m-one-table-center">
            <div v-for="(item,index) in metadata.children" :class="[item.responsiveStyle?'ant-col-'+item.responsiveStyle.xxl:'ant-col-24']">
                <div v-for="itemChildren in item.children" style="width: calc(100% - 1rem);margin-bottom: 0.5rem">
                    <div :class="[globalConfig.layout=='horizontal'?'rx-horizontal':'']" v-if="showControl(itemChildren)">
                        <MFormTitle v-if="itemChildren.control.showTitle"
                                    :name="itemChildren.name"
                                    :metadata="itemChildren"
                                    :style="geStyle()"
                                    :readOnly="curReadOnly(itemChildren)"
                                    :required="curRequired(itemChildren)"
                                    :rules="itemChildren.rules"></MFormTitle>
                        <div class="x-help-describe" v-if="itemChildren.control.describe && !itemChildren.control.describePosition" v-html="itemChildren.control.describe"></div>
                        <m-component
                            style="margin-top: 0.25rem;flex: 1"
                            v-model="data[oneTableField][itemChildren.field]"
                            :data="oneTableData"
                            :metadata="itemChildren"
                            :readOnly="curReadOnly(itemChildren)"
                        ></m-component>
                        <div class="x-help-describe-bottom" v-if="itemChildren.control && itemChildren.control.describe && itemChildren.control.describePosition" v-html="itemChildren.control.describe"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MForm from '../js/MForm'
import FormBase from "../js/FormBase";
import MFormTitle from '@/views/modules/MForm/MFormItem/MFormTitle.vue'
import FormConstant from '@/js/FormConstant.js'
export default {
    name: "MOneTable",
    inject:{
        formVm:{}
    },
    data() {
        return {
            globalConfig: {},
            oneTableField: "",
            oneTableData: {}
        }
    },
    components: {
        MFormTitle,
    },
    mixins: [MForm, FormBase],
    props: ['readOnly'],
    computed:{
        controlName(){
            let self = this;
            let { formVm } = this;
            return (item)=>{
                let {nameCondition} = item.control;
                if(nameCondition){
                    try {
                        if(nameCondition.indexOf('return ') === -1){
                            nameCondition = `return ${nameCondition}`;
                        }
                        let fn = new Function('data','self',nameCondition).call(formVm,formVm.data,formVm);
                        return fn
                    }catch (e) { }
                }
                return self.$i18(item.name) ;
            }
        }
    },
    created(){
        this.globalConfig =  uni.getStorageSync('globalConfig') ;
        this.oneTableField = FormConstant.SubPrefix+this.metadata.field;
        this.oneTableData = this.data[this.oneTableField];
    },
    methods:{
        geStyle(){
            let style={}
            if(this.globalConfig.layout=='horizontal'){
                style = {
                    textAlign:this.globalConfig.align,
                    width:this.globalConfig.labelWidth,
                    margin:'0.5rem 0.5rem 0rem 0.5rem',
                }
            }
            return style
        }
    }
}
</script>

<style scoped>
.rx-horizontal{
    display: flex;
}
.m-one-table-center {
    display: flex;
    flex-flow: row wrap;
    padding-left: 1rem;
}

.m-one-table {
    background: white;
    margin: 0.5rem 0rem;
}
.m-one-table-name{
    letter-spacing: 0rem;
    padding: 0.5rem 0rem  0.5rem 1.5rem;
    color: rgba(51, 51, 51, 1);
    position: relative;
    border-bottom: 0.02rem solid rgba(232, 232, 232, 1);
    background: white;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.m-one-table-name::after {
    content: "|";
    color: rgba(66, 133, 244, 1);
    font-weight: bold;
    position: absolute;
    left: 1rem;
    top: 0.5rem;
}
</style>
